<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="穷在闹市"/>
    <!-- 作者 -->
    <meta name="revised" content="穷在闹市.v3, 2019/05/01"/>
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介"/>
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开"/>
    <title>穷在闹市出品</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

    <style>
        .layui-form-label {
            width: 100px;
        }

        .layui-input-block {
            margin-left: 130px;
        }

        .layui-form {
            margin-right: 30%;
        }
    </style>

</head>

<body>
<div class="cBody">
    <form id="addForm" class="layui-form" action="../../GoodServiet?action=add" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-upload-drag"  id="goodsPic">
            <input type="hidden" id="upload" name="img"/>
            
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
               <hr>
               <div class="layui-hide" id="uploadDemoView">
             <img src="" alt="上传成功后渲染" style="max-width: 196px">
            </div>
        </div>
       </div>
       
        <div class="layui-form-item">
            <label class="layui-form-label">参考价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" required lay-verify="required|number" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品数量</label>
            <div class="layui-input-block">
                <input type="password" name="number" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品库存</label>
            <div class="layui-input-block">
                <input type="password" name="volume" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品描述</label>
            <div class="layui-input-block">
                <textarea name="describes" class="layui-textarea"></textarea>
            </div>
        </div>
       
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <select name="tname" id="provid" lay-filter="provid">
                    
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="启用">
                <input type="radio" name="status" value="1" title="禁用" checked>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitBut">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


    <script>
   //$(function () {
	       //ajax异步请求
	// $.ajax({
	//  url:"../../TypeServiet?action=ajaxquery",
	//  type:"POST",
	//	success: function (date) {
	//		console.log(date);
	//		var js = JSON.parse(date);
	//		var html="";
	//		for(var i=0;i<js.length;i++){
	//			html+="<option value="+js[i].id+">"+js[i].name+"</option>"
	//		}
	//		console.log(js);
	//		$("#provid").html(html);
	//	}
	// });
	
	
	// get
	  //  $.get("../../TypeServiet?action=ajaxquery",function(date){
	    		//	console.log(date);
	    	//		var js = JSON.parse(date);
	    	//		var html="";
	    	//		for(var i=0;i<js.length;i++){
	    	//			html+="<option value="+js[i].id+">"+js[i].name+"</option>"
	    	//		}
	    	//		console.log(js);
	    		//	$("#provid").html(html);
	    			
	    	
	   // });
	
	//post
	   
//})
      
  
        layui.use(['upload', 'form'], function () {
            var form = layui.form;
            var upload = layui.upload;
            var layer = layui.layer;
            console.log(form);
            //监听提交
            form.on('submit(submitBut)', function (data) {
                return true;
            });
            $.post("../../TypeServiet?action=ajaxquery",function(date){
     		   console.log(date);
     		  var jso = JSON.parse(date);
     		  var html="";
     		  for(var i=0;i<jso.length;i++){
     		    html+="<option value="+jso[i].id+">"+jso[i].name+"</option>"
     		  }
     		  console.log(jso.length);
     		  $("#provid").html(html);
     		 form.render("select");
     	   })
            form.verify({
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                ZHCheck: [
                    /^[\u0391-\uFFE5]+$/
                    , '只允许输入中文'
                ]
            });
            //拖拽上传
            upload.render({
                elem: '#goodsPic',
                url: '../../GoodServiet?action=upload',
                done: function (res) {
                    console.log(res.data)
                    console.log(res.imgname);
                    $("#upload").val(res.data);
                    layui.$("#uploadDemoView").removeClass('layui-hide').find('img').attr('src', "../..//upload/"+res.data);
                }
            
            });
        });
    </script>

</div>
</body>

</html>